<template>
  <m-container class="out-work-detail">
    <out-work-top-cell :info="info" />

    <m-cell-group weight="label" size="sm" :border="false" v-for="(item, index) in list" :key="index">
      <view class="box">
        <m-tag>任务{{ index + 1 }}：{{ item.outWorkId }}</m-tag>
        <view class="df aic jcsb">
          <view class="item">
            <text class="title" style="width: 130rpx">出库库位</text>
            <text>{{ item.stackNo + '-' + item.levelNo + '-' + item.locationNo }}</text>
          </view>
          <view class="item" style="min-width: 400rpx">
            <text class="title" style="width: 120rpx">托盘编号</text>
            <text>{{ item.palletCode }}</text>
          </view>
        </view>
        <view class="over">
          <view
            class="item df aic"
            :key="index"
            v-for="(item, index) in item.imsStockOutWorkDetailList"
            style="background-color: #f2f7fd; padding-bottom: 16rpx"
          >
            <image src="@/static/icon9.png" mode="scaleToFill" class="icon_box" />
            <view class="right">
              <view class="item">
                <text class="title">零件图号</text>
                <text>{{ item.partNo }}</text>
              </view>
              <view class="item">
                <text class="title">出库数量（个）</text>
                <text>{{ item.packageNumber }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 2rpx"></view>
    </m-cell-group>

    <m-fixed>
      <m-button width="100%" size="xl" @click="handleClickConfirm"> 开始执行 </m-button>
    </m-fixed>
  </m-container>
</template>

<script>
import { router } from '@/router'
import { getOutOrder, imsStockOutWork } from '@/api/modules/out-work'
import { minCache } from '@/utils/min-cache'

export default {
  data() {
    return {
      info: {
        imsStockOutOrderDetailList: [],
        status: undefined,
      },
      list: [],
    }
  },
  async onLoad(options) {
    const { data } = await getOutOrder(options.id)
    const { rows } = await imsStockOutWork({ outOrderId: options.id })
    this.list = rows
    this.info = data
  },
  methods: {
    handleClickConfirm() {
      minCache.set('outOrderId', this.info.outOrderId)
      router.replace({
        name: 'OutWorkStartDo',
        params: {
          id: this.info.outOrderId,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.out-work-detail {
  .box {
    padding: 20rpx 0 25rpx;

    .item {
      display: flex;
      color: #333;
      font-size: 30rpx;
      padding: 15rpx 20rpx 0rpx;
      flex: 1;
      .title {
        color: #748da7;
        width: 180rpx;
        font-size: 26rpx;
      }
    }
  }
  .over {
    max-height: 450rpx;
    overflow: auto;
    margin: 20rpx 20rpx 0;
    .icon_box {
      width: 86rpx;
      height: 86rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
